@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(bannerFeature) {
  width: 100%;
  max-width: 1100px;
  margin: 2.5rem auto 0;
  overflow: hidden;
  padding: 2rem 0;
  position: relative;
  row-gap: getCssVar("home-banner-feature-row-gap");

  @include e(feature__item) {
    width: 30%;
    text-align: center;
    color: getCssVar("banner-text-color");

    .feature-img {
      width: 10rem;
      height: 10rem;
      animation: heart 1.2s ease-in-out 0s infinite alternate;
      animation-play-state: paused;

      &:hover {
        animation-play-state: running;
      }
    }

    .feature-title {
      font-weight: 500;
      font-size: 1.3rem;
      margin-top: 1rem;
    }

    .feature-description {
      opacity: 0.8;
      margin: 1rem;
    }
  }

  @media (max-width: 719px) {
    @include e(feature__item) {
      width: 100%;
    }
  }

  @keyframes heart {
    from {
      transform: translate(0, 0);
    }
    to {
      transform: translate(0, 8px);
    }
  }
}
